<template>
<div>
  <div>
    <el-page-header @back="goBack" content="秒杀管理">
    </el-page-header>
    <el-button type="primary" size="small" @click="dialogFormVisible=true">添加</el-button>
  </div>
  <div>
    <el-table
      :data="secklist"
      border>
      <el-table-column label="活动名称"
        prop="title"
        width="180">
      </el-table-column>
      <el-table-column label="状态"
        prop="status"
        width="320">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="item">
          <el-button 
            type="primary"
            icon="el-icon-edit"
            @click.native.prevent="editSeck(item.row.id)">
          </el-button>
          <el-button 
            type="danger"
            icon="el-icon-delete"
            @click.native.prevent="deleteSeck(item.row.id)">
          </el-button>
        </template>
      </el-table-column> 
    </el-table>
  </div>

  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    @close="resetForm">
    <el-form :model="form">
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.title" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="时间" :label-width="formLabelWidth">
        <el-date-picker
          v-model="value1"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="一级分类" :label-width="formLabelWidth">
        <el-select @change="filterList(true)" v-model="form.first_cateid" placeholder="请选择上级菜单">
          <el-option
            v-for="item in catelist"
            :key="item.id"
            :label="item.catename"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="二级分类" :label-width="formLabelWidth">
        <el-select @change="filterList(false)" v-model="form.second_cateid" placeholder="请选择上级菜单">
          <el-option
            v-for="item in secondList"
            :key="item.id"
            :label="item.catename"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品" :label-width="formLabelWidth">
        <el-select v-model="form.goodsid" placeholder="请选择上级菜单">
          <el-option
            v-for="item in lastList"
            :key="item.id"
            :label="item.goodsname"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch 
          v-model="form.status"
          :active-value="1"
          :inactive-value="2">
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addSeck">确 定</el-button>
    </div>
  </el-dialog>
 
</div>
</template>

<script>
  // 引入辅助性函数
  import { mapGetters, mapActions } from 'vuex'

  // 引入接口
  import { seckAdd, seckDelete, seckInfo, seckEdit } from '../request/api.js'

  export default {
    name: 'Seckill',
    data() {
      return {
        value1: '',
        secondList: [],
        lastList: [],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        title: '添加活动',
        isAdd: true,
        form: {
          title: '',
          begintime: '',
          endtime: '',
          first_cateid: 0,
          second_cateid: 0,
          goodsid: 0,
          status: 1
        },
      }
    },
    computed: {
      ...mapGetters({
        secklist: 'menu/getSeck',
        catelist: 'menu/getCate',
        goodslist: 'menu/getGoods'
      })
    },
    methods: {
      goBack() {
        this.$router.push('home')
      },
      resetForm() {
        this.form = {
          title: '',
          begintime: '',
          endtime: '',
          first_cateid: 0,
          second_cateid: 0,
          goodsid: 0,
          status: 1
       }
     },
     addSeck() {
       this.form.begintime = this.value1[0]
       this.form.endtime = this.value1[1]
       console.log(this.form)
       this.dialogFormVisible = false
       if(this.isAdd) {
         seckAdd(this.form).then(res => {
           if(res.data.code == 200) {
             this.$message.success(res.data.msg)
             this.getSeck()
           } else {
             this.$message.error(res.data.msg)
           }
         })
       } else {
         seckEdit(this.form).then(res => {
           if(res.data.code == 200) {
             this.$message.success(res.data.msg)
             this.getSeck()
           } else {
             this.$message.error(res.data.msg)
           }
         }) 
       }
       this.resetForm()
     },
     editSeck(id) {
       this.dialogFormVisible = true
       this.isAdd = false
       this.title = '编辑活动'
       seckInfo({ id }).then(res => {
         this.form = res.data.list
       })
     },
     deleteSeck(id) {
       seckDelete({ id }).then(res => {
         if(res.data.code == 200) {
           this.$message.success(res.data.msg)
           this.getSeck()
         } else {
           this.$message.error(res.data.msg)
         }
       })  
     },
     filterList(flag) {
      if(flag) {
        this.catelist.forEach((item)=>{
          if(item.id == this.form.first_cateid) {
            this.secondList = item.children
          }
        })
      } else {
        
        this.goodslist.forEach((item) => {
          this.secondList.forEach((i)=>{
            if(item.second_cateid == i.id) {
            this.lastList.push(item)
            }
          })
        })
      }
       
     },
     ...mapActions({
       getSeck: 'menu/getSeckAction',
       getCate: 'menu/getCateAction',
       getGoods: 'menu/getGoodsAction'
     })
   },
  mounted() {
    this.getSeck()
    this.getCate()
    this.getGoods()
    console.log(this.goodslist,111)

  }
 }
</script>
<style></style>